<template>
  <!-- 工艺审批 -->
  <div class="process-review-page">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>工艺路线管理</el-breadcrumb-item>
        <el-breadcrumb-item>工艺审批</el-breadcrumb-item>
        <el-breadcrumb-item>工艺路线详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="process-version-panel">
      <div class="process-version-collapse">
        <!-- 产品信息 -->
        <el-form :model="basics" ref="form">
          <el-row class="text-center">
            <el-col :span="6">
              <h3>图号：{{ basics.drawingNumber }}</h3>
            </el-col>
            <el-col :span="6">
              <h3>品名：{{ basics.productName }}</h3>
            </el-col>
            <el-col :span="6">
              <h3>材质：{{ basics.materialQuality }}</h3>
            </el-col>
            <el-col :span="6">
              <h3>数量：{{ basics.number }}</h3>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="投产版本" class="w-100percent bold bg-lightGray"></el-form-item>
          </el-row>
        </el-form>
        <!-- 工艺路线折叠面板 -->
        <el-collapse accordion @change="activeChange">
          <template v-for="version in this.versionIdList">
            <el-collapse-item :key="version.versionId" :name="version.versionId">
              <template slot="title">
                <span class="w300">工艺版本：{{ version.versionName }}</span>
                <span>状态：{{ version.versionState }}</span>
              </template>
              <el-table class="mt0" border stripe :span-method="merge" :data="activeData">
                <el-table-column prop="sequenceNumber" label="工序号" align="center" width="80"></el-table-column>
                <el-table-column prop="processName" label="工序名称" align="center" min-width="80"></el-table-column>
                <el-table-column prop="single" label="单双机" align="center" min-width="80">
                  <template slot-scope="scope" v-if="scope.row.department == '加工'">
                    <div>{{ scope.row.single ? '单机' : '双机' }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="department" label="部门/执行" align="center" min-width="80"></el-table-column>
                <el-table-column prop="debugHour" label="定额工时" align="center" min-width="80"></el-table-column>
                <el-table-column prop="quotaHour" label="调试工时" align="center" min-width="80"></el-table-column>
              </el-table>
              <el-col class="w-100percent bold mb5 mt20 remark" style="font-size: 14px">备注 </el-col>
              <br /><br />
              <el-input :readonly="readOnly" v-model="version.remark"> </el-input>
            </el-collapse-item>
          </template>
        </el-collapse>
        <!-- 审核操作区域 -->
        <div v-show="visible">
          <el-form class="mt10" :model="formDetail">
            <el-row>
              <el-form-item label="审核" class="w-100percent bold bg-lightGray"></el-form-item>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="审批结论" label-width="120px" prop="result">
                  <el-select id="selectC10Approval" v-model="formDetail.result" class="w150" placeholder="请选择审批结论" clearable filterable>
                    <el-option id="optionC10ApprovalAgree" label="同意" value="1"></el-option>
                    <el-option id="optionC10ApprovalDisagree" label="不同意" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审批意见" label-width="120px" prop="remark">
                  <el-input type="textarea" :row="1" v-model="formDetail.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-button id="btnC10Save" type="primary" @click="save">保存</el-button>
          <el-button id="btnC10Back" @click="close">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'

const vuexProcess = namespace('TwoProcess')

@Component({
  components: {}
})
export default class DialogDetail extends Vue {
  public $refs!: {
    form: any
  }
  @vuexProcess.State processDetailList: any
  @vuexProcess.State versionIdList: any
  @vuexProcess.Action AUDIT_PROCESS: any
  title: string = '工艺审批'
  visible: boolean = false
  readOnly: boolean = true

  formDetail: any = {
    id: '',
    result: '',
    remark: ''
  }
  rules: any = {
    result: [{ required: true, message: '请选择审批结论', trigger: 'change' }]
  }

  basics: any = {
    productName: '',
    drawingNumber: '',
    number: '',
    remark: ''
  }
  processList: any[] = []

  created() {
    this.basics.drawingNumber = this.$route.params.drawingNumber
    this.basics.productName = this.$route.params.productName
    this.basics.number = this.$route.params.number
    this.basics.materialQuality = this.$route.params.materialQuality
    this.basics.remark = this.$route.params.remark
    console.log(this.$route.params.remark)

    this.formDetail.id = this.$route.params.producingId
    let from = this.$route.params.from
    this.visible = from == 'button'
    // TODO 待理解
    if (this.processDetailList.length > 0) {
      if (this.processDetailList[0].processList.length) {
        this.processList = this.processDetailList[0].processList
      } else {
        this.processList = []
      }
    } else {
      this.processList = []
    }
  }

  open(id: string) {
    this.formDetail.id = id

    // this.title = "审核";
    if (this.processDetailList.length > 0) {
      //  console.log('you')

      if (this.processDetailList[0].processList.length) {
        // console.log('list')
        this.processList = this.processDetailList[0].processList
      } else {
        this.processList = []
      }
    } else {
      this.processList = []
    }

    // this.addpid()
    this.visible = true
  }

  /**
   * 判断数组或者对象是否为空
   *
   * */
  isEmpty(obj) {
    if (!obj && obj !== 0 && obj !== '') {
      return true // 检验 undefined 和 null
    } else if (Array.prototype.isPrototypeOf(obj) && obj.length === 0) {
      return true
    } else if (Object.prototype.isPrototypeOf(obj) && Object.keys(obj).length === 0) {
      return true
    } else {
      return false
    }
  }
  getData(drawingNumber: string, name: string, number: Number) {
    this.basics.drawingNumber = drawingNumber
    this.basics.name = name
    this.basics.number = number
  }
  save() {
    if (!this.formDetail.result) {
      this.$alert('请输入审批结论！', '操作提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
    } else {
      const reviewData = {
        producingId: 0,
        result: true,
        remark: ''
      }
      reviewData.producingId = this.formDetail.id
      reviewData.remark = this.formDetail.remark
      if (this.formDetail.result == 1) {
        reviewData.result = true
      } else {
        reviewData.result = false
      }
      this.reviewProcess(reviewData)
      // console.log('id',typeof(reviewData.id),'re',typeof(reviewData.result))
      // this.$emit('first-review', { ...reviewData })
    }
  }

  async reviewProcess(reviewData: any) {
    let result = await this.AUDIT_PROCESS(reviewData)
    if (result) {
      this.$router.go(-1)
    }
  }

  //折叠面板
  activeData: any = []
  activeChange(versionId: any) {
    console.log('name', versionId)
    let arr = this.processDetailList
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].versionId === versionId) {
        this.activeData = arr[i].processList
        this.addid()
        break
      }
    }
  }
  addid() {
    let i
    let sid = 0
    for (i = 0; i < this.activeData.length; i++) {
      //一级添加sid
      let parent = this.activeData[i]
      let parentkey = 'sid'
      let parentvalue = ++sid
      parent[parentkey] = parentvalue

      if (this.activeData[i].equipmentList.length) {
        let child = this.activeData[i].equipmentList
        for (let c = 0; c < child.length; c++) {
          //二级添加sid
          let obj = child[c] //或者 var obj=new Object();

          let key = 'sid'
          let value = ++sid
          obj[key] = value
        }
      } else {
        let obj = this.activeData[i] //或者 var obj=new Object();//{}
        let equipment = 'equipment'
        let values = this.activeData[i].supplier
        obj[equipment] = values
      }
    }
    // console.log('加id' + this.product)
  }

  merge({ row, column, rowIndex, columnIndex }) {
    // console.log('查看', row, row.equipment)

    if (!row.sequenceNumber) {
      if (columnIndex === 0) {
        return [1, 3]
      } else if (columnIndex === 1) {
        return [0, 0]
      } else if (columnIndex === 2) {
        return [0, 0]
      }
    }
  }

  close() {
    this.$refs.form.resetFields()
    this.formDetail = {
      id: '',
      result: ''
    }
    this.rules = {
      result: [{ required: true, message: '请选择审核结论', trigger: 'change' }]
    }

    this.basics = {
      productName: '',
      drawingNumber: '',
      number: ''
    }
    this.processList = []
    this.$router.go(-1)
  }
}
</script>

<style lang="scss">
.process-review-page {
  padding: 10px 50px 0 10px;
  .process-version-panel {
    margin: 0 10px 50px 0;
    background-color: #fff;
    .process-version-collapse {
      padding: 0 9%;
    }
  }
}
</style>
